<template>
	<view>
		<cmd-nav-bar back title="修改密码"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<form @submit="formSubmit">
					<view class="modify">
						<view class="modify-password">
							<cmd-input v-model="dataForm.password" type="number" displayable maxlength="26" placeholder="请输入旧密码"></cmd-input>
						</view>
						<view class="modify-password">
							<cmd-input v-model="dataForm.newpassword1" type="password" displayable maxlength="26" placeholder="请输入新密码"></cmd-input>
						</view>
						<view class="modify-password">
							<cmd-input v-model="dataForm.newpassword2" type="password" maxlength="26" placeholder="请再次确认新密码"></cmd-input>
						</view>
						<view class="tui-btn-box">
							<button class="btn-primary" formType="submit" hover-class="btn-hover" type="primary">提交</button>
						</view>
					</view>
				</form>
			</cmd-transition>
		</cmd-page-body>
<!--		<form @submit="formPassword" :rules="dataRule">-->
<!--			<view class="tui-login-from">-->
<!--				<view class="self-direction-row">-->
<!--					<view class="basis-df radius text-xl">id：{{dataUser.id}}</view>-->
<!--				</view>-->
<!--				<view class="tui-line-cell">-->
<!--				<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
<!--				<input class="tui-input" maxlength="11" name='dataUser.password' placeholder="请输入旧密码" placeholder-class="phcolor"-->
<!--					   type="number"-->
<!--					   v-model="loginMessage.password"/>-->
<!--			</view>-->
<!--				<view class="tui-line-cell">-->
<!--					<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
<!--					<input class="tui-input" maxlength="11" name='dataUser.newpassword1' placeholder="请输入新密码" placeholder-class="phcolor"-->
<!--						   type="password"-->
<!--						   v-model="loginMessage.password"/>-->
<!--				</view>-->
<!--				<view class="tui-line-cell">-->
<!--					<tui-icon color='#5677fc' name="password" size="20"></tui-icon>-->
<!--					<input class="tui-input" maxlength="11" name='dataUser.newpassword2' placeholder="请再输入新密码" placeholder-class="phcolor"-->
<!--						   type="password"-->
<!--						   v-model="loginMessage.password"/>-->
<!--				</view>-->
<!--				<button class="btn-primary tui-btn-submit" form-type="submit" hover-class="btn-hover">确认修改</button>-->
<!--			</view>-->
<!--		</form>-->
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdInput from "@/components/cmd-input/cmd-input.vue"
	import { updatePassword } from '@/api/user/index'
	import { findUserById } from '@/api/user/index'
	import {mapActions} from 'vuex'

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdInput
		},

		data() {
			return {
				dataForm:{
					id: '',
					loginName: '',
					phone: '',
					photo: '',
					password: '',
					newpassword1: '',
					newpassword2: ''
				}
			};
		},
		onLoad(option) {
			this.init()
		},
		methods: {
			...mapActions(['updatePassword']),

			/**
			 * 提交按钮点击执行
			 */
			formSubmit(e) {
				let user = {
					id: this.dataForm.id,
					password: this.dataForm.password,
					newpassword1: this.dataForm.newpassword1,
					newpassword2: this.dataForm.newpassword2
				}
				updatePassword(user).then(res => {
					this.dataForm = res.data
					this.dataForm.loginName = res.data.loginName
					this.dataForm.phone = res.data.phone
					this.dataForm.photo = res.data.photo
					this.dataForm.password = res.data.password
					this.dataForm.newpassword1 = res.data.newpassword1
					this.dataForm.newpassword2 = res.data.newpassword2
					console.log('dataForm', this.dataForm)
					uni.showToast({
						title: '修改成功'
					})

				})

				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},

		beforeDestroy() {
			/**
			 * 关闭页面清除轮询器
			 */
			clearInterval(this.safety.interval);
		}
	}
</script>

<style>
	.modify {
		margin-top: 118upx;
		margin-right: 72upx;
		margin-left: 72upx;
	}

	.modify-phone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #dedede solid;
		margin-top: 118upx;
		margin-bottom: 40upx;
	}

	.modify-phone-getcode {
		color: #3F51B5;
		text-align: center;
		min-width: 140upx;
	}

	.modify-password,
	.modify-code {
		margin-bottom: 40upx;
		border-bottom: 2upx #dedede solid;
	}

	.btn-modify {
		margin-top: 100upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}

	.btn-modify-active {
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.btn-modify-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}

	button[disabled] {
		color: #fff;
	}
</style>
